<template>
  <div class="app-item">
    <div class="icon" :style="`background: ${color};`">
      <ali-icon
        :icon="icon"
        v-if="icon"
        color="white"
        :size="20"
      />
    </div>
    <div class="title">{{ title }}</div>
    <div class="desc">{{ description }}</div>
  </div>
</template>

<script>
import AliIcon from "@/components/aliIcon/index"

export default {
  name: 'AppItem',
  components: {
    AliIcon
  },
  data() {
    return {
      //
    }
  },
  props: {
    icon: {
      type: String,
      default() {
        return 'iconzhaopinrenshi'
      }
    },
    color: {
      type: String,
      default() {
        return '#DC4646'
      }
    },
    title: {
      type: String,
      default() {
        return '标题'
      }
    },
    description: {
      type: String,
      default() {
        return '描述'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-item {
  width: 228px;
  height: 240px;
  background: #FFFFFF;
  border-radius: 8px;
  padding-top: 36px;
  padding-left: 30px;
  padding-right: 30px;
  margin-right: 10px;
  margin-bottom: 10px;
  .icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin: 0 auto;
    .icon {
      padding: 10px;
    }
  }
  .title {
    font-weight: 400;
    color: #303133;
    font-size: 21px;
    line-height: 60px;
    text-align: center;
  }
  .desc {
    width: 168px;
    height: 31px;
    font-size: 12px;
    // font-weight: 400;
    color: #606266;
    line-height: 18px;
    text-align: center;
  }
}
.app-item:hover {
  border: 1px solid#0076FE;
  box-shadow: 0px 3px 7px 0px rgba(0, 118, 254, 0.35);
}
</style>
